<script setup>
import $http from '@/utils/http'
import { ref, defineEmits } from 'vue'
import { useUserStoreHook } from '@/stores/modules/user'
import { useToast } from 'wot-design-uni'

const toast = useToast()
const useUserStore = useUserStoreHook()
const checked = ref(false)
const airplayNoPublic = ref('')
const showKeyboard = ref(true)
const uploadPath = ref('')
const liveBroadcastRoom = ref('')
const liveBroadcastName = ref('')

const emit = defineEmits(['success'])

// 选择图片
const selectImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		sourceType: ['album'],
		success: (res) => {
			uploadPath.value = res.tempFilePaths[0]
		}
	})
}

// 点击创建直播间按钮
const createFormBtn = () => {
	if(liveBroadcastRoom.value === '') { 
		toast.show('直播号不能为空')
		return
	}
	if(liveBroadcastName.value === '') {
		toast.show('直播名称不能为空')
		return
	}
	if(uploadPath.value === '') {
		toast.show('直播封面未设置')
		return
	}
	if(checked.value) {
		if(airplayNoPublic.value === '') {
			toast.show('未公开时的直播密码不能为空')
			return
		}
	}
	
	requestCreateLivePusher(checked.value ? {
		user_id: useUserStore.userinfo.id,
		is_public: 1,
		airplay_no_public: airplayNoPublic.value,
		live_broadcast_room: liveBroadcastRoom.value,
		live_broadcaSt_poster: uploadPath.value,
		live_broadcast_name: liveBroadcastName.value
	} : {
		user_id: useUserStore.userinfo.id,
		live_broadcast_room: liveBroadcastRoom.value,
		live_broadcaSt_poster: uploadPath.value,
		live_broadcast_name: liveBroadcastName.value
	})
}

// 请求创建直播间
const requestCreateLivePusher = async (data) => {
	// console.log(data)
	
	const res = await $http.uploadFile({
		url: `/create-live-pusher`,
		method: 'POST',
		header: {
			token: true
		},
		filePath: data.live_broadcaSt_poster,
		data,
	})
	if(res.code !== 200) {
		toast.show({
			position: 'bottom',
			msg: res.msg
		})
		return
	}
	emit('success')
}

</script>

<template>
	<view class="create-form">
		<view class="create-title">创建直播间</view>
		<view>
			<view class="form-itme">
				<text class="itme-text">直播间号</text>
				<wd-input
					class="itme-input"
					focus type="number"
					v-model="liveBroadcastRoom"
					placeholder="例如: 100000" />
			</view>
			<view class="form-itme">
				<text class="itme-text">直播名称</text>
				<wd-input
					class="itme-input"
					v-model="liveBroadcastName"
					type="text" placeholder="直播名称" />
			</view>
			<view class="form-itme">
				<text class="itme-text">私密直播</text>
				<view>
					<wd-switch class="itme-switch" v-model="checked" size="20px" />
					<view v-if="checked">
						<wd-password-input
							v-model="airplayNoPublic" :length="6"
							:focused="showKeyboard" @focus="showKeyboard = true" />
						<wd-number-keyboard
							v-model="airplayNoPublic" v-model:visible="showKeyboard"
							:maxlength="6" @blur="showKeyboard = false">
						</wd-number-keyboard>
					</view>
				</view>
			</view>
			<view class="form-itme">
				<text class="itme-text">直播封面</text>
				<view class="upload-img">
					<view class="show-upload-img" v-if="uploadPath">
						<wd-img
							class="show-img"
							mode="heightFix"
						  :src="uploadPath"
						  :enable-preview="true"
						/>
					</view>
					<view class="show-upload-icon" @click="selectImage">
						<wd-icon name="camera" color="#B8B8B8" size="22px"></wd-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="form-itme form-btn-box">
			<wd-button class="form-btn" size="large" @click="createFormBtn">创建</wd-button>
		</view>
	</view>
	<wd-toast />
</template>

<style scoped lang="scss">
.create-form {
	width: 100%;
	height: 100%;
	
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	
	.create-title {
		width: 100%;
		height: 80rpx;
		color: #424242;
		font-size: 35rpx;
		font-weight: 600;
		border-bottom: 1px solid #dddddd;
		
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.form-itme {
		flex: 1;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		
		.itme-text {
			color: #424242;
			font-size: 30rpx;
		}
		.itme-input {
			color: #424242;
			font-size: 28rpx;
		}
		.itme-switch {
			margin: 10rpx 0 0 10rpx;
		}
		.upload-img {
			padding: 20rpx 0 0 20rpx;
			
			display: flex;

			.show-upload-icon {
				width: 150rpx;
				height: 150rpx;
				margin-left: 20rpx;
				background-color: #F5F5F5;
				
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.show-upload-img {
				width: 150rpx;
				height: 150rpx;
				background-color: #F5F5F5;
				
				.show-img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.form-btn {
			width: 100%;
			height: 80rpx;
		}
	}
	.form-btn-box {
		display: flex;
		align-items: flex-end;
	}
}
</style>